<%@page import="backend.db.ORM" %>
<%@page import="backend.Course" %>
<script type="text/javascript" src="student/myCourses.js"></script>
<script type="text/javascript" src="shared/displayTable.js"></script>
<script type="text/javascript" src="shared/getPage.js"></script>
<link rel="stylesheet" type="text/css" href="style/coursesTable.css" />
<div id="main-myCourses">
	<%
		String userName = request.getUserPrincipal().getName();
		Iterable<Course> courses = ORM.getMyCourses(userName);
		int size = 0;
	%>
	<form id="coursesForm" action="#">
		<fieldset>
			<legend>My courses: </legend>
			<table>
			<tr id="firstTr" style="display: none;">
			<th style="width:5%;"></th>
			<th style="width:23%;">Course name</th>
			<th style="width:15%;">Course id</th>
			<th style="width:5%;">Credit points</th>
			<th style="width:10%;">Group number</th>
			<th style="width:15%;">Moed A</th>
			<th style="width:15%;">Moed B</th>
			<th style="width:12%;">Unregister?</th>
			</tr>
			<%
				for (Course course : courses) {
					%>
					<tr id="trOfTable<%=size %>" style="display: none;">
						<td> 
							<input type="checkbox" name="option" value="<%=course.courseName%>" />
						</td>
						<td> 
							<a href="#" onclick="getCoursePage('<%=course.courseName %>');">
						 	<%=course.courseName%> </a>
						 </td>
						 <td>
						 	<%=course.courseId%>
						 </td>
						 <td>
						 	<%=course.creditPoints%>
						 </td>
						 <td>
						 	<%=course.groupNum%>
						 </td>
						 <td>
						 	<%=course.moedA%>
						 </td>
						 <td>
						 	<%=course.moedB%>
						 </td>
						<td>
							<p id="<%=course.courseName%>" class="par" onclick="remove(this, '<%=size %>');">unregister</p> 
						</td>
					</tr>
					<%
					size++;
				}
			%>
			</table>
			<%
			if(size > 0)
			{
			%>
				<div style="text-align:left;">
					<p class="par" onclick="removeSelected(<%=size %>);"> 
							unregister selected 
					</p>
				</div>
			<%
			}
			%>
		</fieldset>
	</form>
	<script type="text/javascript">
		displayTable(<%=size%>);
	</script>
	<form id="removeForm" method="post" action="#">
	<div>
		<input type="hidden" name="username" value="<%=userName %>" />
		<input type="hidden" id="course" name="course" value=""/>
	</div>
	</form>
	<form id="removeSelectedForm" method="post" action="#">
		<div>
		<input type="hidden" name="username" value="<%=userName %>" />
		</div>
	</form>
	<script type="text/javascript">
		setPostFormToServlet('removeForm', 'student/MyCourses');
		setPostFormToServlet('removeSelectedForm', 'student/MyCourses');
	</script>
</div>
